<template>
  <div>
    <el-container style="height: 100vh">
      <el-header>
        <h1 style="margin: 0">管理系统</h1>
        <div>
          <el-dropdown @command="handleCommand" trigger="click">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{ username }}</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :router="true" :default-active="$route.path">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>分类管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/categories/create">新建分类</el-menu-item>
                <el-menu-item index="/categories/list">分类列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-goods"></i>物品管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/items/create">新建物品</el-menu-item>
                <el-menu-item index="/items/list">物品列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-trophy"></i>英雄管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/heros/create">新建英雄</el-menu-item>
                <el-menu-item index="/heros/list">英雄列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-document"></i>文章管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/articles/create">新建文章</el-menu-item>
                <el-menu-item index="/articles/list">文章列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-data-line"></i>广告管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/ads/create">新建广告</el-menu-item>
                <el-menu-item index="/ads/list">广告列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-user"></i>管理员管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin_users/create"
                  >新建管理员</el-menu-item
                >
                <el-menu-item index="/admin_users/list"
                  >管理员列表</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view :key="$route.path"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: ''
      // tableData: Array(20).fill(item)
    }
  },
  created () {
    console.log(this.$route)
    this.getUser()
  },
  methods: {
    async getUser () {
      if (localStorage.token) {
        let res = await this.$http.get('/login')
        this.username = res.data.username
      }
    },
    // 登出
    handleCommand (command) {
      if (command === 'logOut') {
        localStorage.removeItem('token')
        this.$router.push('/Login')
      }
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  color: #333;
}
</style>
